<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }

    tbody .layui-table-cell {
      height: 57px;
    }
  </style>
</head>

<body>

  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="">产品管理</a>
        <!-- <a href="">轮播图管理</a> -->
        <a><cite>产品详情</cite></a>
      </span>
    </div>
    <div class="layui-card-body">
      <table class="layui-table" lay-even lay-filter="test" lay-skin="row" id="goods_list" lay-size="lg">
      </table>
    </div>
  </div>
</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>
<!-- 操作模块 -->
<script type="text/html" id="operation">
  <div> <button type="button" class="layui-btn layui-btn-xs " lay-event="check">查看</button>
    <button type="button" lay-event="change" class="layui-btn layui-btn-xs layui-btn-warm">修改</button>
    <button type="button" lay-event="delete" class="layui-btn  layui-btn-xs layui-btn-danger">删除</button></div>
</script>
<!-- 表格上方操作 -->
<script type="text/html" id="goods_list_top">
  <div>

    <span type="button" class="layui-btn layui-btn-danger" onclick="deleteChecked()" style="margin-right: 10x;"><i
        class="layui-icon layui-icon-delete"></i>批量删除</span>
    <!-- <span type="button" class="layui-btn layui-btn-normal" onclick="pc_add()" style=" margin-right: 20px;"><i
        class="layui-icon layui-icon-add-1"></i>添加</span> -->
    <div class=" layui-input-inline">
      <!-- 搜索当成表单来做就好了 -->
      <!-- <button lay-submit lay-filter="*">提交</button>     -->
      <input type="text" name="search" placeholder="请输产品名称" id="search_input" autocomplete="off" class="layui-input">
    </div>
    <button type="button" lay-submit lay-filter="search" id="search_button" class=" layui-btn"><i
        class="layui-icon layui-icon-search"></i>
      查询</button>
  </div>
</script>
<script>
  var layer
  var $
  var layer
  var form
  var tableIns
  var table
  // 批量删除复选框 
  function deleteChecked() {
    var checkStatus = table.checkStatus('goods_list');
    var ids
    if (checkStatus.data.length > 0) {
      // 选中大于1
      var idsArray = [];
      for (var i = 0; i < checkStatus.data.length; i++) {
        idsArray.push(checkStatus.data[i].pi_id);
      }
      ids = idsArray.toString();
      // console.log(ids);
      // layui.layer.alert(ids); 
      

      var deleteAllIns = layer.confirm('您确认要将选中的全部删除么', {
        btn: ['删除', '取消'],
      }, function (index, layero) {
        $.ajax({
          type: 'get',
          data: {
            ids
          },
          url: '/admin/goods/deletecheck',
          success: res => {
            if (res.code == 1) {
              tableIns.reload()
              layer.close(deleteAllIns)
            }
          }
        })
      }, function (index) {
        //按钮【按钮二】的回调
        // console.log('no');
      });

      // $(".layui-form-checked").not('.header').parents('tr').remove();
    } else {
      layui.layer.alert("请至少选择一行");
    }
  }

  // 查看
  // queryGoods
  // function queryGoods(id) {
  //   $.ajax({
  //     type: 'get',
  //     dataType: 'json',
  //     url: `/admin/goods/query`,
  //     data: {
  //       id
  //     },
  //     success: (res) => {

  //     }
  //   })
  // }




  layui.use(['element', 'layer', 'util', 'form', 'table', 'jquery'], function () {
    var {
      util,
      element
    } = layui
    layer = layui.layer
    form = layui.form;
    table = layui.table
    $ = layui.$;





    // 表格渲染
    tableIns = table.render({
      elem: '#goods_list',
      url: '/admin/goods/list',
      cols: [
        [{
          field: 'pi_checked',
          width: '5%',
          type: 'checkbox',
          fixed: 'left'
        }, {
          field: 'pi_id',
          title: 'ID',
          width: '5%',
          sort: true,
        }, {
          field: 'pi_name',
          title: '产品名称',
          width: '10%',
        }, {
          field: 'pi_title',
          title: '产品标题',
          width: '30%',
        }, {
          field: 'pi_img',
          title: '产品图片',
          width: '15%',
          templet: '<div><img src="{{d.pi_img}}" alt=""  width=500></div>'
        }, {
          field: 'pc_name',
          title: '产品分类',
          width: '15%',
          // templet: '#banner_sort_list'
        }, {
          field: 'experience',
          title: '操作',
          width: '20%',
          templet: '#operation',
          fixed: 'right'
        }]
      ],
      loading: true,
      toolbar: '#goods_list_top',
      title: '商品分类详情表',
      // totalRow: true,
      page: true,
      limits: [5, 10, 15, 20, 30, 50, 70, 80, 90, 100],
      limit: 10
    })

    // 表格行事件
    table.on('tool(test)', function (obj) {
      // console.log(obj.data.pi_id);
      // console.log(obj);
      // var checkStatus = table.checkStatus(obj.config.id);
      switch (obj.event) {
        case 'check':
          // 查看
          // layer.msg('添加'); 

          location.href = `/admin/goods/read?id=${obj.data.pi_id}`
          break;
        case 'delete':
          // layer.msg('删除');
          var deleteIns = layer.confirm('您确认要删除么', {
            btn: ['删除', '取消'],
          }, function (index, layero) {
            //按钮【按钮一】的回调
            // console.log('yes');
            $.ajax({
              type: 'get',
              url: `/admin/goods/delete?id=${obj.data.pi_id}`,
              success: (res) => {
                if (res.code == 1) {
                  // 删除成功
                  // 把弹出框关掉
                  // layer.msg(res.msg)
                  tableIns.reload()
                  layer.close(deleteIns)
                  // location.href = '/admin/goods/details'

                }
                // 弹出提示
                layer.msg(res.msg)
              }
            })
          }, function (index) {
            //按钮【按钮二】的回调
            // console.log('no'); 
          });
          break;
        case 'change':
          location.href = `/admin/goods/update?id=${obj.data.pi_id}`
          break;
      };
    });



    // 查询
    form.on('submit(search)', function (data) {
      tableIns.reload({
        where: { //设定异步数据接口的额外参数，任意设
          search: data.field.search,
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    })

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg('展开左侧菜单的操作', {
          icon: 0
        });
      },
      menuRight: function () {
        layer.open({
          type: 1,
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ['260px', '100%'],
          offset: 'rt', //右上角
          anim: 5,
          shadeClose: true,
        });
      },
    });
  });
</script>